<template>
  <div class="ja-container">
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('username')}">
        <input type="text" required v-model="info.username" v-validate="'required|max:10'" name="username"/>
        <label data-content="姓名*"></label>

      </div><!--
    --><div class="form-right flex-row gender">
        <label class="ewai">性别*</label>
        <el-radio v-model="info.sex" label="1" class="man-radio">
          男
          <span class="gender-checked" v-show="info.sex === '1'"></span>
        </el-radio>
        <el-radio v-model="info.sex" label="2" class="nv-radio">
          女
          <span class="gender-checked" v-show="info.sex === '2'"></span>
        </el-radio>
      </div>
    </div>
    <div class="flex-row ">
      <div class="form-left">
        <div class="material-textfield green width-full" :class="{'validate-err': errors.has('birthday')}">
          <el-date-picker
           v-validate="'required'" name="birthday"
           class="width-full date-icon-right"
           v-model="info.birthday"
           type="date"
           :pickerOptions="pobirthday"
           placeholder="">
         </el-date-picker>
          <label data-content="出生日期*"></label>
        </div>
        <div class="material-textfield green width-full" :class="{'validate-err': errors.has('toWorkTime')}">
          <el-date-picker
           v-validate="'required'" name="toWorkTime"
           class="width-full date-icon-right"
           v-model="info.toWorkTime"
           type="date"
           :pickerOptions="powork"
           placeholder="">
         </el-date-picker>
          <label data-content="参加工作时间*"></label>
        </div>
        <div class="material-textfield green width-full" :class="{'validate-err': errors.has('profession')}">
          <input type="text" required v-model="info.profession"  v-validate="'required'" name="profession"/>
          <label data-content="从事专业*"></label>
        </div>
        <div class="material-textfield green width-full" :class="{'validate-err': errors.has('position')}">
          <input type="text" required v-model="info.position"  v-validate="'required'" name="position"/>
          <label data-content="现任职务*"></label>
        </div>
      </div><!--
    --><div class="form-right flex-row gender" :class="{'validate-err': errors.has('photo')}">
        <label class="ewai">上传照片*</label>
        <file-upload
          ref="upload"
          :is-display="true"
          list-type="picture-card"
          :limit="1"
          accept="image/*, .jpg, .png, .jpeg"
          v-model="info.photo"
          v-validate="'required'"
          name="photo"
          init-name="gerentouxiang.png"
        >
          <i class="el-icon-plus"></i>
        </file-upload>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    title: '个人基本信息',
    name: 'person-info',
    props: {
      personinfo: {}
    },
    data () {
      return {
        gender: '',
        birthday: '', // 出生日期
        date: '', // 入职时间
        // isUp: true,
        info: {},
        dialogImg: false,
        pobirthday: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        powork: {
          disabledDate: (time) => {
            if (this.info.birthday instanceof Date) {
              return (time.getTime() >  Date.now() - 8.64e6) || (time.getTime() < this.info.birthday.getTime())
            }
            return false
          }
        }
      }
    },
    methods: {
     validate () {
       return this.$validator.validateAll()
     },
   },
   mounted () {
     this.info = Object.assign({}, this.personinfo)

   },
   watch: {
     'info': {
       handler: function (val, oldVal) {
         this.$emit('update:personinfo', this.info)
       },
       deep: true
     }
   }
  }
</script>
<style>
  .ja-container .el-upload--picture-card {
    width: 150px;
    height: 150px;
    line-height: 150px;
  }
  .ja-container .el-upload-list--picture-card .el-upload-list__item {
    width: 150px;
    height: 150px;
  }
  .ja-container .el-dialog__body {
    overflow: auto;
  }
</style>
